<template>
    
    <el-button type="primary" class="w115 "  @click="editOpen()" >添加邀请码</el-button>

    <div class="bgf mart20" v-loading="loading" >
         
        <el-table  :data="list" >

            <el-table-column fixed prop="invitationCodeId" min-width="120" label="邀请码id"  ></el-table-column>

            <el-table-column prop="invitationCode" min-width="80" label="邀请码"  ></el-table-column>

            <el-table-column prop="status" min-width="120" label="状态"  >
                <template #default="scope">
                    {{ statusL[scope.row.status] }}
                </template>
            </el-table-column>

            <el-table-column prop="createTime" min-width="160" label="创建时间" show-overflow-tooltip ></el-table-column>
         
            <el-table-column fixed="right" label="操作" width="120" >
                <template #default="scope">
                    <el-button  @click="editOpen(scope.row)" text type="primary">编辑</el-button>
                    <el-divider direction="vertical" />
                    <el-button  @click="del(scope.row.id)" text type="primary">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="h70 pad20 flexab ">
            <p class="font10 cola4">共 {{total}} 条</p>
            <el-pagination
                v-model:currentPage="param.pageNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 15, 20, 25]"
                :page-size="param.pageSize"
                layout=" sizes, prev , jumper , next"
                :total="total">
            </el-pagination>
        </div>
    </div>

    <el-dialog v-model="editShow" :title=" editData.invitationCodeId ? '编辑': '新增'" width="562px" destroy-on-close >
        <el-form :model="editData" class="demo-form-inline" label-width="100px" v-loading="dialogLoading" ref="submitForm" :rules="rules">

            <el-form-item label="邀请码" prop="invitationCode">
                <el-input v-model="editData.invitationCode" placeholder="请输入邀请码" class="w340"> </el-input>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-select v-model="editData.status" placeholder="选择状态"  class="w340" >
                    <el-option label="不启用" :value="0" />
                    <el-option label="启用" :value="1" />

                </el-select>
            </el-form-item>

        </el-form>
             
        <template #footer>
            <div class="tc">
                <el-button  @click="editShow = false" >取消</el-button>
                <el-button type="primary" @click="editSub" :loading="dialogLoading" >确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
export default {
    data(){
        const checkPassword= (rule, value, callback) => {
            // console.log(value);
            if(value){
                if(value == this.editData.password){
                    callback();
                }else{
                    callback(new Error("密码输入错误，请重新输入！"));
                }
            }else{
                callback(new Error("请确认密码！"));
            }
        };
        return{
            rolesCate:[],
            editData:{},
            roleIdArr:[],

            editShow:false,
            loading: false,
            dialogLoading: false,
            param:{
                pageNumber:1,
                pageSize: 10,
            },
            list:[],
            total:0,
            statusL: { 0: '不启用', 1: '启用' },
            rules :{
                roleId: [ { required: true, message: '请选择身份', trigger: 'change' } ],
                nickname: [ { required: true, message: '请输入管理员姓名', trigger: 'blur' } ],
                username: [ { required: true, message: '请输入账号', trigger: 'blur' } ],
                password: [ { required: true, message: '请输入密码', trigger: 'blur' } ],
                password2: [ { required: true, validator: checkPassword, trigger: 'blur' } ],
            }
        }
    },
    created(){
        this.getList()
        this.getCate();

    },
    methods:{

        del(id){
            let that = this;
            this.$msgbox.confirm(
                "删除后的身份信息将不会出现在管理员的列表中",
                "确定要删除该管理员的信息么？",
                {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                }
            ).then(() => {
                that.$api.invitationCodeDelete({invitationCodeId:id}).then(res=>{
                    console.log(res);
                    if(res){
                        that.getList();
                        that.$message.success(res.message);
                    }
                })
            }).catch(() => {});
        },

        editSub(){
            let that = this;
            that.$refs['submitForm'].validate(async (res)=>{
                if(res){
                    console.log(that.editData,'editData');
                    let obj = JSON.parse(JSON.stringify(that.editData));
                    that.dialogLoading = true;
                    // obj.roleIdArr = that.roleIdArr.join(',')
                    let res ;
                   res = await that.$api.invitationCodeaddEidt(obj);

                    that.dialogLoading = false;

                    if(res){
                        that.$message.success(res.message);
                        that.getList();
                        that.editShow = false;
                    }
                }
            })
        },

        editOpen(val){
            let that = this;

            if(val){
                console.log(val,'val--------');
                that.editData = {
                    invitationCodeId: val.invitationCodeId,
                    invitationCode: val.invitationCode,
                    status: val.status
                };

            }else{
                that.editData={};
                that.roleIdArr = [];
            }
            
            that.editShow = true;
        },

        // 重置
        rewrite(){
            let that = this;
            let obj = {
                reviewStatus: that.param.reviewStatus,
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
            }
            that.param = obj;
        },

        getList(pageNumber){
            let that = this;
            if(pageNumber){
                that.param.pageNumber = pageNumber;
            }
            that.loading = true;
            console.log(this.param,'this.param=====')
            that.$api.invitationCodeList(this.param).then(res=>{
                console.log(res);
                if(res){
                    this.list = res.records
                    this.total = res.total;
                }
                that.loading = false;
            })
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },

        // 分类
        getCate(){

            let that = this;
            that.$api.roleList({pageNumber:1,pageSize:1000}).then(res=>{
                console.log(res,'rolesCate');
                if(res){
                    that.rolesCate = res.records;
                }
            })

        },
    }
}
</script>
<style lang="scss" scoped>
.manage1{
    padding: 25px 20px;
    .from{
        background: #F2F3F5;
        padding: 24px 16px 4px;
        margin-bottom: 20px;
    }
}
.manage2{
    padding: 14px ;
    display: flex;
    align-items: center;
    font-size: 14px;
}
</style>